<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>查询所有联系人</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        tr,th {
            text-align: center;
        }
        h4{
            color: green;
        }
    </style>
</head>
<body>
<div class="container">
    <form action="PageQueryServlet" method="get" class="form-inline" id="contactForm">
        <h3>联系人列表</h3>
		<div class="row text-right" style="margin-bottom: 10px; margin-top: 15px;">
            <h4>欢迎回来,xxx</h4>

			姓名：<input type="text" name="keyword"  class="form-control" placeholder="搜索的名字" style="width: 120px;"
                      id="keyword" value="${map.keyword}"
        />
			年龄：
			<input type="number"  name="minAge" class="form-control" style="width: 60px;"
                   id="minAge" value="${map.minAge}"
            />
			<input type="number"  name="maxAge" class="form-control" style="width: 60px;"
                   id="maxAge" value="${map.maxAge}"
            />
			<button class="btn btn-default"><i class="glyphicon glyphicon-search"></i>查询</button>
		</div>
        <div class="row">
            <table border="1" class="table table-bordered table-hover">
                <tr class="success">
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>籍贯</th>
                    <th>QQ</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
                <c:forEach var="contact" items="${bean.list}">
				<tr>
					<td>${contact.id}</td>
					<td>${contact.name}</td>
					<td>${contact.sex}</td>
					<td>${contact.age}</td>
					<td>${contact.address}</td>
					<td>${contact.qq}</td>
					<td>${contact.email}</td>
					<td>
						<div class="btn-group btn-group-sm">
							<a class="btn btn-primary btn-xs" href="add.jsp">添加</a>
							<a class="btn btn-success btn-xs" href="FindSingleServlet?id=${contact.id}">修改</a>&nbsp;
							<a class="btn btn-info btn-xs" href=DeleteServlet?id=${contact.id}>删除</a>
						</div>
					</td>
				</tr>
                </c:forEach>

            </table>
        </div>

        <div class="row text-center">
            <div class="btn-group btn-group-sm">
                <c:if test="${bean.page > 1}">
					<a href="javascript:method01('${bean.first}','${bean.count}')" class="btn btn-default">首页</a>
					<a href="javascript:method01('${bean.pre}','${bean.count}')" class="btn btn-default">上页</a>
                </c:if>
                    <c:if test="${bean.page < bean.last}">
					<a href="javascript:method01('${bean.next}','${bean.count}')" class="btn btn-default">下页</a>
					<a href="javascript:method01('${bean.last}','${bean.count}')" class="btn btn-default">末页</a>
                    </c:if>
            </div>
			 每页
            <input type="number" class="form-control" name="size"  style="width: 60px;" id="size"
                value="${bean.count}"
                onchange="method01(1,this.value)"
            />

            条

            第
            <%--
               TODO: select下拉框
               1). 语法: 选项数量是由option决定
               2). 逻辑: 选项数量由bean.last决定
                  实现: jstl的forEach
               TODO: select 选项改变要发起请求(js)
               1). 事件:onchange
               2). 逻辑: 发起请求
                   this.value就是那个option被选中,就是这个option的value
               TODO: 数据回显

                list2.jsp(发起请求) ->  PageQueryServlet(请求转发) -> list2.jsp
                   A(第一页)                                          B(第二页)
                    修改了页码按钮                                    按钮默认第一页

                   A会被B覆盖

               解决: 从B页面

           --%>
            <select id="current" class="form-control" name="current"
            onchange="method01(this.value,'${bean.count}')">
                    <c:forEach var="i" begin="1" end="${bean.last}">
                    <option value="${i}" ${bean.page == i?'selected':''}>${i}</option>
                    </c:forEach>
            </select>
            页/共${bean.last}页
            共${bean.sum}条
        </div>
    </form>
</div>
</body>
<script>
    function method01(page,count) {
        // console.log("xx");
        /*
            BOM: 地址栏 location对象
            es6模板字符串跟el表达式是冲突的, 解决 \
         */
        // js的dom(js操作属性)
        let keyword = document.getElementById("keyword").value
        let maxAge = document.getElementById("minAge").value
        let minAge = document.getElementById("maxAge").value

        location.href = "PageQueryServlet?page="+page+"&count="
            + count+"&keyword=" + keyword+"&minAge=" + minAge+"&maxAge=" + maxAge
     }
</script>

</html>
